/**
 * Created by wuhaiyang on 2017/4/11.
 */


import React, {Component} from 'react'

import {
    View,
    StyleSheet,
    Image
} from 'react-native'


import TabNavigator from 'react-native-tab-navigator'
import ArticlePage from './ArticlePage'

export default class HomePage extends Component {

    constructor(props) {
        super(props)
        this.state = {
            selectedTab: 'home'
        }
    }

    renderTab(selectFlag, selectStr, iconUrl, Content) {
        return (
            <TabNavigator.Item
                selected={this.state.selectedTab === selectFlag}
                title={selectStr}
                selectedTitleStyle={{color:'#2196f3'}}
                renderIcon={() => <Image source={iconUrl} style={styles.image}/>}
                renderSelectedIcon={() => <Image source={iconUrl} style={[styles.image,{tintColor:'#2196f3'}]}/>}
                onPress={() => this.setState({ selectedTab: selectFlag})}>
                <Content {...this.props}/>
            </TabNavigator.Item>
        )
    }

    render() {
        return <View style={styles.container}>
            <TabNavigator>
                {this.renderTab('home', "首页", require('../../res/img/ic_polular.png'), ArticlePage)}
                {this.renderTab('category', "采购", require('../../res/img/ic_trending.png'), ArticlePage)}
                {this.renderTab('favorite', "收藏", require('../../res/img/ic_favorite.png'), ArticlePage)}
                {this.renderTab('mine', "我的", require('../../res/img/ic_my.png'), ArticlePage)}
            </TabNavigator>
        </View>
    }
}

const styles = {
    container: {
        flex: 1,
    },
    image: {
        height: 22,
        width: 22
    }
}
